<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海伦县域商业供应链管理平台注册</title>
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <link rel="stylesheet" href="./elementUI/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/register.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="form">
            <div class="title">
                已有账号？<el-button style="color: rgb(95, 103, 219);" type="text"
                    @click="window.location.href='login.html'">去登录</el-button>
            </div>
            <div class="register">注册</div>
            <el-tabs style="width: 600px;" v-model="activeName" class="my-tabs" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="我是员工" name="first">
                    <!-- 员工注册 -->
                    <div class="staff">人员信息</div>
                    <el-form :model="system_user_info1" status-icon :rules="rules" ref="system_user_info1"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item label="公司名称">
                            <el-input @change="ChangeEnterpriseName" class="my-input" v-model="Enterprise_Name" autocomplete="off"></el-input>
                            <span v-show="show1" style="color: brown;">该企业未注册</span>
                        </el-form-item>
                        <el-form-item label="姓名" prop="ID_Name">
                            <el-input v-model="system_user_info1.ID_Name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="ID_SerialNumber">
                            <el-input v-model="system_user_info1.ID_SerialNumber" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="User_Number">
                            <el-input v-model="system_user_info1.User_Number"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="Pass_Ward">
                            <el-input type="password" placeholder="数字、字母、下划线任意两种组合"
                                v-model.trim="system_user_info1.Pass_Ward"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass3">
                            <el-input type="password" v-model="system_user_info1.checkPass3"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" style=" font-size: 20px;
                                width: 70%;" :loading="loading"
                                @click="submitForm('system_user_info1')">加入企业</el-button>
                            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="我是企业" name="second">
                    <div class="staff">企业信息</div>
                    <!-- 企业注册 -->
                    <div style="display: flex;align-items: center;">
                        <div style="display: flex;flex-direction: column;align-items: center;">
                            <div class="preview" v-if="imageUrl!=''">
                                <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px"
                                    :src="imageUrl" fit="contain"></el-image>
                                <span class="el-upload-list__item-actions">
                                    <span @click="handlePictureCardPreview()"><i class="el-icon-zoom-in"></i></span>
                                    <span @click="handleRemove()"><i class="el-icon-delete"> </i></span>
                                </span>
                            </div>
                            <el-upload v-else class="upload-demo" :show-file-list="false" list-type="picture-card"
                                action="" accept="image/*" :before-upload="uploadBanner">
                                <i slot="default" :class="!loading1?'el-icon-plus':'el-icon-loading'"></i>
                                <div class="el-upload__tip" slot="tip">上传图片用于直接识别企业，且大小不超过100kb</div>
                            </el-upload>
                        </div>
                        <div>
                            <el-form :model="enterprise_info" status-icon ref="system_user_info" label-width="100px"
                                class="demo-ruleForm">
                                <el-form-item label="企业名称" prop="Enterprise_Name">
                                    <el-input placeholder="请输入企业名称" style="width: 250px;" @change="ChangeEnterpriseName"
                                        v-model="enterprise_info.Enterprise_Name" autocomplete="off"></el-input>
                                    <span v-show="show" style="color: brown;">该企业已被注册</span>
                                </el-form-item>
                                <el-form-item label="企业地址" prop="address" :rules="{
                                    required: true, message: '企业地址不能为空', trigger: 'change'
                                  }">
                                    <el-cascader :disabled="true" @change="change" v-model="address" filterable :props="{value:'label'}"
                                        :options="city" style="width: 100%"></el-cascader>
                                </el-form-item>
                                <el-form-item label="所乡镇属">
                                    <el-select @change="SelectAddressDetail" style="width: 100%" v-model="addressDetail"
                                        clearable placeholder="请选择所乡镇属">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="执照编号" prop="Tax_Number">
                                    <el-input type="text" placeholder="请输入执照编号"
                                        v-model="enterprise_info.Tax_Number"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="staff">管理员信息</div>
                    <el-form :model="system_user_info" status-icon :rules="rules" ref="enterprise_info"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item label="姓名" prop="ID_Name">
                            <el-input placeholder="请输入管理员姓名" v-model="system_user_info.ID_Name"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="ID_SerialNumber">
                            <el-input placeholder="请输入管理员身份证号" v-model="system_user_info.ID_SerialNumber"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="User_Number">
                            <el-input placeholder="请输入管理员手机号" v-model="system_user_info.User_Number"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="Pass_Ward">
                            <el-input type="password" placeholder="数字、字母、下划线任意两种组合"
                                v-model.trim="system_user_info.Pass_Ward"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" placeholder="请再次输入密码" v-model="system_user_info.checkPass"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" :loading="loading" style=" font-size: 20px;
                                width: 70%;" @click="submitEnterpriseForm('enterprise_info')">创建企业</el-button>
                            <!-- <el-button @click="resetEnterpriseForm()">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="imageUrl" alt="">
        </el-dialog>
    </div>
    <script src="component/layui/layui.js"></script>
    <script src="component/pear/pear.js"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="elementUI/index.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="./js/compressor.js"></script>
    <script type="text/javascript" src="./js/ID_Validity.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                var pwdValidator2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.system_user_info.Pass_Ward) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                var pwdValidator3 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.system_user_info1.Pass_Ward) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                //校验身份证号
                var validatePass3 = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入身份证号'));
                    } else {
                        callback();
                    }
                    setTimeout(() => {
                        if (!ID_Validity(value)) {
                            callback(new Error('请输入正确的身份证号'));
                        } else {
                            callback();
                        }
                    }, 100);
                }
                var validatePass4 = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入手机号'));
                    }
                    setTimeout(() => {
                        if (!validatemobile(value)) {
                            callback(new Error('请输入正确的手机号'));
                        } else {
                            callback();
                        }
                    }, 100);
                }

                //密码校验
                function pwdValidator(_, value, callback) {
                    if (/^(?![\d]+$)(?![a-zA-Z]+$)(?![_]+$)[\da-zA-Z_]{6,20}$/.test(value)) {
                        callback();
                    } else {
                        callback(new Error("数字、字母、下划线任意两种组合，且不能少于6位"));
                    }
                }
                // 姓名校验
                function isValidName(_, value, callback) {
                    if (!value) {
                        return callback(new Error('请输入姓名'))
                    } else {
                        callback();
                    }
                }
                // 执照编码校验
                function Tax_Number(_, value, callback) {
                    if (!value) {
                        return callback(new Error('请输入执照编码'))
                    } else {
                        callback();
                    }
                }
                /**
             * 公司名称校验
             * */
                var companyNameC = (rule, value, callback) => {
                    //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
                    const re = /^[\u4e00-\u9fa5]+$/
                    if (!value) {
                        return callback(new Error('请输入公司名称'))
                    }
                    setTimeout(() => {
                        if (re.test(value.trim())) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的公司名称'))
                        }
                    }, 100)
                }
                return {
                    activeName: 'second',
                    loading: false,
                    loading1:false,//图片加载中
                    Enterprise_Name: '',
                    imageUrl: "",
                    show: false,
                    show1:false,
                    dialogVisible:false,
                    city: [],
                    address: ['黑龙江省', '绥化市', '海伦市'],
                    addressDetail: "",
                    system_user_info1: {
                        checkPass3: '',
                        Enterprise_Info_SerialNumber: '',
                        ID_Name: '',
                        ID_SerialNumber: '',
                        Pass_Ward: '',
                        Admin_Type: "0",
                        User_Number: '',
                        Examine:'1'
                    },
                    enterprise_info: {
                        Enterprise_Info_SerialNumber: '',
                        Enterprise_Name: '',
                        Tax_Number: '',
                        Picture_Url: "",
                        address: [],
                        addressDetail: "",
                        Postal_Code:"",
                        Enterprise_Address: "",
                        Calculation_SerialNumber:"C00000000000001",
                        Industry_SubCategory_SerialNumber: 'I01000000000001',
                        Industry_Category_SerialNumber: 'I00000000000001'
                    },
                    system_user_info: {
                        checkPass: '',
                        Admin_Type: "1",
                        Enterprise_Info_SerialNumber: '',
                        ID_Name: '',
                        ID_SerialNumber: '',
                        Pass_Ward: '',
                        User_Number: '',
                        Examine:'0'
                    },
                    options: [
                        {
                            label: "海伦镇",
                            value: '海伦镇',
                            longitude: "126.979878",
                            latitude: "47.470439",
                            Postal_Code:'01',
                        },
                        {
                            label: "海北镇",
                            value: '海北镇',
                            longitude: "126.860067",
                            latitude: "47.664534",
                            Postal_Code:'02',
                        },
                        {
                            label: "伦河镇",
                            value: '伦河镇',
                            longitude: "126.442795",
                            latitude: "47.156756",
                            Postal_Code:'03',
                        },
                        {
                            label: "共合镇",
                            value: '共合镇',
                            longitude: "126.640387",
                            latitude: "47.347124",
                            Postal_Code:'04',
                        },
                        {
                            label: "海兴镇",
                            value: '海兴镇',
                            longitude: "126.677986",
                            latitude: "47.194942",
                            Postal_Code:'05',
                        },
                        {
                            label: "祥富镇",
                            value: '祥富镇',
                            longitude: "126.795941",
                            latitude: "47.282837",
                            Postal_Code:'06',
                        },
                        {
                            label: "东风镇",
                            value: '东风镇',
                            longitude: "127.112271",
                            latitude: "47.419528",
                            Postal_Code:'07',
                        },
                        {
                            label: "百祥镇",
                            value: '百祥镇',
                            longitude: "126.47013",
                            latitude: "47.233388",
                            Postal_Code:'08',
                        },
                        {
                            label: "前进镇",
                            value: '前进镇',
                            longitude: "126.825654",
                            latitude: "47.405557",
                            Postal_Code:'09',
                        },
                        {
                            label: "向荣镇",
                            value: '向荣镇',
                            longitude: "126.822762",
                            latitude: "47.5126",
                            Postal_Code:'10',
                        },
                        {
                            label: "长发镇",
                            value: '长发镇',
                            longitude: "126.944347",
                            latitude: "47.543249",
                            Postal_Code:'11',
                        },
                        {
                            label: "东林镇",
                            value: '东林镇',
                            longitude: "127.041463",
                            latitude: "47.516606",
                            Postal_Code:'12',
                        },
                        {
                            label: "永和镇",
                            value: '永和镇',
                            longitude: "126.604933",
                            latitude: "47.449245",
                            Postal_Code:'13',
                        },
                        {
                            label: "共荣镇",
                            value: '共荣镇',
                            longitude: "126.865259",
                            latitude: "47.173773",
                            Postal_Code:'14',
                        },
                        {
                            label: "海南乡",
                            value: '海南乡',
                            longitude: "126.999377",
                            latitude: "47.242298",
                            Postal_Code:'15',
                        },
                        {
                            label: "乐业乡",
                            value: '乐业乡',
                            longitude: "126.960178",
                            latitude: "47.344062",
                            Postal_Code:'16',
                        },
                        {
                            label: "福民乡",
                            value: '福民乡',
                            longitude: "126.719425",
                            latitude: "47.164045",
                            Postal_Code:'17',
                        },
                        {
                            label: "丰山乡",
                            value: '丰山乡',
                            longitude: "126.581503",
                            latitude: "47.176053",
                            Postal_Code:'18',
                        },
                        {
                            label: "永富镇",
                            value: '永富镇',
                            longitude: "126.442652",
                            latitude: "47.05417",
                            Postal_Code:'19',
                        },
                        {
                            label: "联发镇",
                            value: '联发镇',
                            longitude: "126.512375",
                            latitude: "47.327557",
                            Postal_Code:'20',
                        },
                        {
                            label: "爱民乡",
                            value: '爱民乡',
                            longitude: "126.692562",
                            latitude: "47.59392",
                            Postal_Code:'21',
                        },
                        {
                            label: "扎音河乡",
                            value: '扎音河乡',
                            longitude: "126.975571",
                            latitude: "47.654621",
                            Postal_Code:'22',
                        },
                        {
                            label: "双录乡",
                            value: '双录乡',
                            longitude: "127.062659",
                            latitude: "47.640831",
                            Postal_Code:'23',
                        },
                    ],
                    // 表单校验
                    rules: {
                        Pass_Ward: [
                            { validator: pwdValidator, trigger: 'blur' }
                        ],
                        checkPass: [
                            { validator: pwdValidator2, trigger: 'blur' }
                        ],
                        checkPass3: [
                            { validator: pwdValidator3, trigger: 'blur' }
                        ],
                        ID_SerialNumber: [
                            { validator: validatePass3, trigger: 'blur' }
                        ],
                        ID_Name: [
                            { validator: isValidName, trigger: 'blur' }
                        ],
                        User_Number: [
                            { validator: validatePass4, trigger: 'blur' }
                        ],
                        Enterprise_Name: [
                            { validator: companyNameC, trigger: 'blur' }
                        ],
                        Tax_Number: [
                            { validator: Tax_Number, trigger: 'blur' }
                        ],
                    }
                };
            },
            mounted() {
                // this.getData()
                const _this = this
                $.ajax({
                    url: "./js/city.json",
                    data: { action: "jQueryAjax" },
                    type: "GET",
                    success: function (data) {
                        _this.city = data
                    },
                    dataType: "json"
                })
            },
            methods: {
                // tab栏切换
                handleClick(tab, event) {
                    console.log(tab)
                },
                change(e) {
                    console.log(e)
                },
                SelectAddressDetail(e) {
                    let { latitude, longitude,Postal_Code } = this.options.filter(item => item.label == e)[0]
                    console.log(longitude, latitude)
                    this.enterprise_info.longitude = longitude
                    this.enterprise_info.latitude = latitude
                    this.enterprise_info.Postal_Code = Postal_Code
                },
                // 提交员工表单
                submitForm(formName) {
                    if(this.show1){
                        this.$message.error('该企业名未注册,请重新填写');
                        return
                    }
                    this.loading = true
                    let _this = this
                    _this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.ajax({
                                url: DomainName + '/Register_Employee',
                                type: 'POST',
                                data: {
                                    system_user_info: JSON.stringify({ system_user_info: [_this.system_user_info1] }),
                                    Enterprise_Name: _this.Enterprise_Name
                                },
                                success: function (result) {
                                    console.log(result);
                                    if (result.Status == "success") {
                                        _this.$message({
                                            message: '注册成功,等待审核...',
                                            type: 'success'
                                        });
                                        window.location.href = 'index.html';
                                    } else {
                                        _this.$message.error(result.Cause);
                                    }
                                },
                                error: function (params) {
                                    console.log(params);
                                },
                                complete: function () { _this.loading = false }
                            })
                        } else {
                            _this.loading = false
                            return false;
                        }
                    });
                },
                // 提交企业表单
                submitEnterpriseForm(formName) {
                    let _this = this
                    if (this.show) {
                        this.$message.error('该企业名已被注册,请重新填写');
                        return
                    }
                    if (_this.enterprise_info.Enterprise_Name == '' || _this.enterprise_info.Enterprise_Name.Tax_Number == '') return _this.$message.error('请完善企业信息');
                    _this.loading = true
                    _this.$refs[formName].validate(valid => {
                        if (valid) {
                            // 发送请求
                            this.enterprise_info.Enterprise_Address = this.address[0] + '/' + this.address[1] + '/' + this.address[2] + '/' + this.addressDetail
                            console.log(this.system_user_info)
                            console.log(this.enterprise_info)
                            $.ajax({
                                url: DomainName + '/Register_Enterprise',
                                type: 'POST',
                                data: {
                                    system_user_info: JSON.stringify({ system_user_info: [_this.system_user_info] }),
                                    enterprise_info: JSON.stringify({ enterprise_info: [_this.enterprise_info] })
                                },
                                success: function (result) {
                                    console.log(result);
                                    if (result.Status == "success") {
                                        _this.loading = true
                                        _this.$message({
                                            message: '恭喜你，注册成功',
                                            type: 'success'
                                        });
                                        window.location.href = 'login.html';
                                    } else {
                                        _this.$message.error(result.Cause);
                                    }
                                },
                                error: function (params) {
                                    console.log(params);
                                },
                                complete: function () { _this.loading = false }
                            })
                        }
                    });
                },
                uploadBanner(file) {//上传图片
                    let _this = this
                    _this.loading1 = true;
                    new Compressor(file, {
                        quality: 1,
                        success(file) {
                            const formData = new FormData();
                            formData.append('file', file, file.name);
                            let oFileReader = new FileReader();
                            oFileReader.readAsDataURL(file);
                            oFileReader.onload = function (e) {
                                
                                $.ajax({
                                    type: 'POST',
                                    url: DomainName + '/BusinessPIC',
                                    data: {
                                        Data: e.target.result,
                                        DataLength: file.size,
                                        FileName: file.name
                                    },
                                    complete: function (XMLHttpRequest) {
                                        _this.loading1 = false
                                        if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                                            window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                                            _this.$message(Result.Picture_Url)
                                        }
                                    },
                                    success: function (Result) {
                                        console.log(Result)
                                        console.log(file)
                                        if (Result.Status == "success") {
                                            _this.enterprise_info.Enterprise_Name = Result.Data.Enterprise_Name
                                            _this.enterprise_info.Tax_Number = Result.Data.Tax_Number
                                            _this.system_user_info.ID_Name = Result.Data.Legal_Person
                                            _this.imageUrl = e.target.result
                                            _this.enterprise_info.Picture_Url = Result.Picture_Url
                                            // _this.IdentifyPicture(Result.Picture_Url, file.name)
                                        } else {
                                            _this.$message.error('上传失败')
                                        }
                                    },
                                    error: function () {
                                        _this.$message.error("操作失败，请稍后再试")
                                    },
                                    dataType: "json"
                                });
                            }
                        },
                        error(err) {
                            console.log(err.message);
                        },
                    });
                },
                handlePictureCardPreview(imageUrl){
                    this.dialogVisible = !this.dialogVisible
                },
                handleRemove() {//删除图片
                    this.imageUrl = ''
                    this.enterprise_info.Enterprise_Name = ''
                    this.enterprise_info.Tax_Number = ''
                    this.system_user_info.ID_Name = ''
                    this.enterprise_info.Picture_Url = ''
                },
                ChangeEnterpriseName(Enterprise_Name){
                    const this_ = this
                    $.ajax({
                        type: 'POST',
                        url: DomainName + '/CheckRegisterAction',
                        data: {
                            Enterprise_Name,
                        },
                        complete: function (XMLHttpRequest) {
                            if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                                window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                                _this.$message(Result.Picture_Url)
                            }
                        },
                        success: function (Result) {
                            console.log(Result)
                            if(Result.Status=='success'){
                                this_.show = false
                                this_.show1 = true
                            }else if(Result.Status=='fail'){
                                this_.show = true
                                this_.show1 = false
                            }
                        },
                        error: function () {
                            this_.$message.error("操作失败，请稍后再试")
                        },
                        dataType: "json"
                    });
                },
                // 最终验证
                // checkForm(formName) {
                //     return new Promise((resolve, reject) => {
                //         resolve()
                //         reject()
                //     }).then(
                //         () => {

                //         },
                //         () => { console.log('error') }
                //     )
                // }
            },
        })
    </script>
</body>

</html>